<template>
    <div>
      <el-row>
        <el-col :span="4">
          <el-row>
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in monitor.monitorData"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :timestamp="activity.timestamp">
                {{activity.content}}
              </el-timeline-item>
            </el-timeline>
          </el-row>
        </el-col>
        <el-col :span="monitor.monitorData ? 20 : 24" align="middle">
          <el-card>
            <div slot="header">
              <span style="font-weight: bold;font-size: 25px">
                {{monitor.isError ? '新生14天健康自测' : '入校流程'}}
              </span>
            </div>
            <el-row v-if="monitor.isError">
              <el-col :span="8">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:10000/api/thirdparty/oss"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
              <el-col :span="16" justify="start">
                <h4>公告</h4>
                <p>请完成14天健康自测，每天上传健康码(如不按规定上传，则入校功能不可用)，</p>
                <p>如有任何问题，联系本班班主任！！！</p>
              </el-col>
            </el-row>
            <el-row v-else :gutter="6">
              <el-col v-for="(item, index) in processVo.process" :key="index" :span="6" align="middle">
                <div class="round" @click="showDetail(index)"
                     :style="{'background-color': activeNodes.indexOf(item.id) !== -1 ? '#42b983' : 'firebrick'}">
                  <span style="font-size: 20px">{{index + 1}}</span>
                </div>
                <span style="font-weight: bold;font-size: 15px;margin-top: 10px">{{item.title}}</span>
              </el-col>
            </el-row>
            <el-row>
              <div style="margin-top: 5%">
                <h3>{{content}}</h3>
              </div>
            </el-row>
          </el-card>
          <p style="font-size: 10px;color: red">注：绿色代表已完成，红色代表未完成</p>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import {selectAllAndCurrent, selectMonitorById, uploadImg} from "../api/fom";
    import {mapGetters} from 'vuex'
    import {mixin} from "../mixins";

    export default {
      name: "FOM",
      mixins: [mixin],
      computed:{
        ...mapGetters([
          "userId"
        ])
      },
      data(){
          return{
            monitor: {
              id: '',
              currentUrl: '',
              isError: true,
              monitorData: []
            },
            imageUrl: '',
            processVo: {},
            activeNodes: [],
            content: ''
          }
      },
      created() {
        this.init()
      },
      methods: {
        init() {
          selectMonitorById(this.userId).then(({data}) => {
            this.monitor = data.monitorVo
            // this.monitor.isError = false
            if(!this.monitor.isError){
              selectAllAndCurrent(this.userId).then(({data}) => {
                if(data.code === 0){
                  this.activeNodes = []
                  this.processVo = data.processVo
                  data.processVo.current.split(",").forEach(item => {
                    this.activeNodes.push(parseInt(item))
                  })
                  this.content = data.processVo.process[0].content
                }else{
                  this.notify("初始化错误，请稍后再试！", "error")
                }
              }).catch(err => {
                console.error(err)
                this.notify("初始化错误，请稍后再试！", "error")
              })
            }
          }).catch(err => {
            console.error(err)
            this.notify("初始化错误，请稍后再试！", "error")
          })
        },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          console.log(res.url);
          uploadImg(this.monitor.id, res.url).then(({data}) => {
            if(data.code === 0){
              this.notify("上传成功", "success")
              this.init()
            }else{
              this.$alert(data.msg, '警告', {
                confirmButtonText: '确定',
                type: 'error',
                callback: action => {
                  this.$message({
                    type: 'error',
                    message: '及时向班主任报备'
                  });
                }
              });
            }
          }).catch(err => {
            console.error(err)
            this.notify("上传失败，请稍后再试", "error")
          })
        },
        showDetail(index){
          this.content = this.processVo.process[index].content
        }
      }
    }
</script>

<style>
  .round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-style: solid;
    display:table-cell;
    vertical-align:middle;
    cursor: pointer;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
